<template>
	<view class="container">
		<view class="tops">
			<view class="online-class">在线好课</view>
		</view>
		<scroll-view class="scroll-tab" scroll-x :scroll-left="scrollLeft" :show-scrollbar="false" enable-flex >
			<view class="tab-container">
				<view v-for="(item, index) in tabs" :key="index" class="tab-item" @click="switchTab(item.id,index)">
					<view class="font" :class="{ active: currentTab === index }">{{ item.cate_name }}</view>
					<view class="active-line" v-if="currentTab === index"> </view>
				</view>
			</view>
		</scroll-view>
		<view class="swiper-container">
			<swiper :circular="true" :autoplay="true" :interval="3000" :previous-margin="20" :next-margin="20" class="my-swiper" @change="onSwiperChange">
				  <swiper-item v-for="(item, index) in bannerList" :key="index" class="swiper-item" >
					<image :src="item.banner" mode="scaleToFill" class="swiper-image" @click="toDetail(item)" :style="{zIndex: activeIndex === index ? 2 : 1,transform: getItemScale(index)}"/>
				  </swiper-item>
				</swiper>
		</view>
		<!-- 双按钮 -->
		<view class="button-group">
			<view class="btn" @click="aboutus">
				<image src="/static/about.png" class="btn-icon" mode="widthFix"></image>
				<text class="font">了解京师万学</text>
			</view>
			<view class="btn" @click="zixun">
				<image src="/static/wechat.png" class="btn-icon" mode="widthFix"></image>
				<text class="font">选课咨询</text>
			</view>
		</view>
		<!--体验课-->
		<view class="experience-class">
			<view class="experience-title">
				<view class="font"> 体验课 </view>
			</view>
			<view class="experience-view">
				<view class="experience-list" v-for="item in tiyan" @click="tydetail(item.url)">
					<view class="exp-title">
						<view class="free-icon">
							<text>免费</text>
						</view>
						<view class="titles">
							<view class="font"> {{item.c_title}} </view>
						</view>
					</view>
					<view class="desc">
						<view class="font"> 随时可看 丨 上课周期：{{item.week}} </view>
					</view>
					<view class="teachers">
						<view class="teacher-img">
						</view>
						<view class="class-btns">
							<view class="font"> 免费体验 </view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!--正式课-->
		<view class="experience-class">
			<view class="experience-title">
				<view class="font"> 正式课 </view>
			</view>
			<view class="experience-view">
				<view class="experience-list" v-for="item in zhengshi" @click="classdetail(item)">
					<view class="exp-title">
						<view class="titles">
							<view class="font"> {{item.c_title}} </view>
						</view>
					</view>
					<view class="desc">
						<view class="font"> 上课周期：{{item.week}} 丨 适合人群：{{item.person}} </view>
					</view>
					<view class="teachers">
						<view class="class-infos">
							<view class="price"> ￥ {{item.price}} </view>
							<view class="nums"> 已有{{item.people}}人报名 </view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!--合同弹窗-->
		<view class="contract" v-if="contractShow">
			<view class="modal"> </view>
			<view class="contract-view">
				<view class="titles"> 您有未签署的合同 </view>
				<view class="contents">
					<view class="lists" v-for="item in contractList">
						<view class="names"> 合同名称：{{item.name}} </view>
						<view class="btns" @click="toDetail(item)"> <button class="bttt">{{item.flowstatus}}</button> </view>
					</view>
				</view>
			</view>
		</view>
	</view>
	
	<!--自定义TabBar-->
	<uv-tabbar :value="value" :fixed="true" @change="index=>value = index" activeColor="#F56822">
		<view class="tabbars">
			<uv-tabbar-item text="在线好课" @click="tabbarClick(1)">
				<template v-slot:active-icon>
					<image class="icon" src="/static/tabbar/index-check.png"></image>
				</template>
				<template v-slot:inactive-icon>
					<image class="icon" src="/static/tabbar/index.png"></image>
				</template>
			</uv-tabbar-item>
			<uv-tabbar-item text="我的课程" @click="tabbarClick(2)">
				<template v-slot:active-icon>
					<image class="icon" src="/static/tabbar/class-check.png"></image>
				</template>
				<template v-slot:inactive-icon>
					<image class="icon" src="/static/tabbar/class.png"></image>
				</template>
			</uv-tabbar-item>
			<uv-tabbar-item text="汉语动态" @click="tabbarClick(3)">
				<template v-slot:active-icon>
					<image class="icon" src="/static/tabbar/chinese-check.png"></image>
				</template>
				<template v-slot:inactive-icon>
					<image class="icon" src="/static/tabbar/chinese.png"></image>
				</template>
			</uv-tabbar-item>
			<uv-tabbar-item text="个人中心" @click="tabbarClick(4)">
				<template v-slot:active-icon>
					<image class="icon" src="/static/tabbar/user-check.png"></image>
				</template>
				<template v-slot:inactive-icon>
					<image class="icon" src="/static/tabbar/user.png"></image>
				</template>
			</uv-tabbar-item>
		</view>
	</uv-tabbar>
</template>

<script>
export default {
	data() {
		return {
			currentTab: 0,
			scrollLeft: 0,
			tabs: [],
			bannerList: [],
			activeIndex: 0,
			freeClass: [],
			ipaClass: [],
			ipa: [],
			job: [],
			baseURL: getApp().globalData.baseUrl,
			kfUrl: '',
			tiyan: [],
			zhengshi:[],
			contractList: [],
			contractShow: false,
			value: 0
		}
	},
	onShow(){
		this.getInfos()
		this.getTab()
		this.eqb()
	},
	methods: {
		onSwiperChange(e) {
			this.activeIndex = e.detail.current
		},
		switchTab(ids,index) {
			this.currentTab = index
			this.getClass(ids)
		},
		toDetail(items){
			uni.setStorageSync('kfUrl',items.url)
			setTimeout(function(){
				uni.navigateTo({url: '/pages/index/kf'})
			},200)
		},
		onSwiperChange(e) {
			this.activeIndex = e.detail.current
		},
		getItemScale(index) {
			const diff = Math.abs(index - this.activeIndex)
			const total = this.bannerList.length
			const distance = Math.min(diff, total - diff) // 环形轮播距离计算
			return distance === 0 ? 'scale(1)' : 'scale(0.96)'
		},
		getInfos(){
			uni.request({
				url: this.baseURL + '/api/index/index',
				method: 'GET',
				header: { 'Content-Type': 'application/json' },
				success: (res) => {
					  this.bannerList = res.data.data.banner
					  this.kfUrl = res.data.data.ask
				},
				fail: (err) => {
					console.error('请求失败:', err);
				}
			})
		},
		getTab(){
			uni.request({
				url: this.baseURL + '/api/index/typeList',
				method: 'GET',
				header: { 'Content-Type': 'application/json' },
				success: (res) => {
					  this.tabs = res.data.data
					  this.getClass(res.data.data[0].id)
				},
				fail: (err) => {
					console.error('请求失败:', err);
				}
			})
		},
		getClass(ids){
			uni.request({
				url: this.baseURL + '/api/index/lists',
				method: 'GET',
				header: { 'Content-Type': 'application/json' },
				data: {a:ids},
				success: (res) => {
					this.tiyan    = res.data.listSt
					this.zhengshi = res.data.list
				},
				fail: (err) => {
					console.error('请求失败:', err);
				}
			})
		},
		aboutus(){
			uni.navigateTo({url: '/pages/user/aboutus'})
		},
		zixun(){
			uni.setStorageSync('kfUrl',this.kfUrl)
			setTimeout(function(){
				uni.navigateTo({url: '/pages/index/kf'})
			},200)
		},
		//获取合同签署信息
		eqb(){
			var appid = uni.getStorageSync('appid')
			uni.request({
				url: this.baseURL + '/api/user/initEqb',
				method: 'GET',
				header: { 'Content-Type': 'application/json' },
				data: {appid:appid},
				success: (res) => {
					if( res.data.data.length > 0 ){
						this.contractList = res.data.data
						this.contractShow = !this.contractShow
					}
				},
				fail: (err) => {
					console.error('请求失败:', err);
				}
			})
		},
		contractclose(){
			this.contractShow = !this.contractShow
		},
		classdetail(item){
			uni.navigateTo({url: '/pages/class/baoming?id='+item.id})
		},
		tydetail(item){
			uni.setStorageSync('videoUrl',item)
			uni.navigateTo({url: '/pages/video/video'})
		},
		qianshu(item){
			uni.setStorageSync('kfUrl',item.url)
			setTimeout(function(){
				uni.navigateTo({url: '/pages/index/kf'})
			},200)
		},
		tabbarClick(item){
			if( item == 1 ){
				uni.reLaunch({url: '/pages/index/index'})
			} else if( item == 2 ){
				uni.reLaunch({url: '/pages/class/class'})
			} else if( item == 3 ){
				uni.reLaunch({url: '/pages/dynamics/dynamics'})
			} else if( item == 4 ){
				uni.reLaunch({url: '/pages/user/user'})
			}
		}
	}
}
</script>

<style>
	.container{background: #F8FAFB; height: calc(100vh - 30rpx);}
	.tops{display: flex;width: 690rpx;margin: 0 auto;justify-content: space-between;flex-direction: row;padding: 10rpx 0 10rpx 0;}
	.tops .online-class{font-size: 42rpx;font-weight: bold;}
	.tops .setting{width: 50rpx;height: 50rpx;}
	.scroll-tab {width: 100%;height: 110rpx;white-space: nowrap;display: flex;flex-direction: row;background: #FFF;}
	.tab-container {display: flex;flex-direction: row;height: 100%;}
	.tab-item {flex-shrink: 0;height: 60rpx;margin: 20rpx;display: table-cell;vertical-align: bottom;position: relative;}
	.tab-item .font{font-size: 32rpx;color: #666;line-height: 60rpx;display: block;}
	.font.active{color: #F56822;font-weight: bold;font-size: 36rpx;}
	.active-line {position: absolute;width: 90%;bottom: 0;left: 5%;height: 5rpx;background-color: #F56822;}
	/* 轮播图 */
	.swiper-container {padding: 10rpx 0;position: relative;}
	.my-swiper {height: 280rpx;overflow: visible;width: 690rpx;margin-left: 30rpx;}
	.swiper-item{height: 100%;border-radius: 20rpx;position: relative;}
	.swiper-image {width: 100%;height: 100%;position: absolute;left: 0rpx;border-radius: 20rpx;}
	/* 按钮组 */
	.button-group {width: 690rpx;margin: 30rpx auto;display: flex;justify-content: space-between;flex-wrap: nowrap;flex-direction: row; }
	.btn {width: 330rpx;height: 80rpx;background-color: #ffffff;border-radius: 10rpx;display: flex;align-items: center;justify-content: center;flex-shrink: 0;box-sizing: border-box;flex-direction: row;}
	.btn .font{font-size: 28rpx;}
	.btn-icon {height: 40rpx;margin-right: 10rpx;flex-shrink: 0;width: 40rpx;}
	.experience-class{width: 690rpx;margin: 30rpx auto;}
	.experience-title{width: 690rpx;}
	.experience-title .font{font-size: 38rpx;font-weight: bold;letter-spacing: 5rpx;}
	.experience-view{width: 690rpx;display: flex;flex-direction: column;}
	.experience-list{width: 92%;background: #fff;border-radius: 10rpx;margin-top: 20rpx;padding: 30rpx;position: relative;height: 240rpx;}
	.exp-title{display: flex;flex-direction: row;position: absolute;top: 20rpx;left: 10rpx;}
	.font-zsk{font-size: 30rpx;}
	.zhengshi{margin-left: 20rpx;}
	.experience-list .free-icon{float: left;position: relative;background: url(/static/free.png);background-size: 100% 100%;font-size: 24rpx;color: #fff;line-height: 40rpx;height: 40rpx; padding: 0 10rpx 0 10rpx;margin-top: 5rpx;}
	.titles .font{line-height: 50rpx;font-size: 30rpx;margin-left: 10rpx;}
	.desc{margin-top: 10rpx;position: absolute;top: 70rpx;}
	.desc .font{color: #ADADAD;font-size: 26rpx;}
	.teachers{width: 100%;display: flex;flex-direction: row;align-items: center;justify-content: space-between;position: absolute;bottom: 40rpx;right: 10rpx;}
	.teacher-img{width: 50%;display: flex;flex-direction: row;justify-content: start;}
	.class-btns{width: 120rpx;height: 50rpx;background: #F56822;border-radius: 50rpx;}
	.class-btns .font{font-size: 24rpx;color: #fff;display: block;line-height: 50rpx;text-align: center;}
	.class-infos{display: flex;flex-direction: row;width: 100%;justify-content: space-between;align-items: center;}
	.class-infos .price{color: #F56822;font-size: 24rpx;padding-left: 30rpx;display: block;}  
	.class-infos .nums{color: #ADADAD;padding-top: 5rpx;font-size: 24rpx;margin-right: 20rpx;display: block;}
	.contract{width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 9999;}  
	.contract .modal{position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 1; background: rgba(0,0,0,0.6); }
	.contract .contract-view{width: 70%;position: relative;top: 35%;left: 15%;background: #fff;border-radius: 10rpx;padding-bottom: 50rpx;z-index: 2; }
	.contract .titles{padding: 40rpx 0 10rpx 40rpx;font-weight: bold;font-size: 30rpx;display: block;}
	.contract .contents{width: 100%;display: flex;flex-direction: column;}
	.contract .lists{width: 98%;display: flex;flex-direction: row;align-items: center;justify-content: space-around;padding-top: 20rpx;margin: 0 auto;}
	.contract .lists .names{font-size: 28rpx;padding: 20rpx;}
	.contract .lists .btns .bttt{border-radius: 10rpx;background: #43AAF7;color: #fff;width: 130rpx;height: 50rpx;line-height: 50rpx;font-size: 26rpx;}
	.icon {width: 50rpx;height: 50rpx;}
	.tabbars{ margin-top: 20rpx;display: flex;flex-direction: row;justify-content: space-around;width: 100%;padding-bottom: 20rpx; }
</style>